<template>
  <div class="home_box">
    <!-- 柱形图 -->
    <div class="mychart" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'

//DOM
const chartRef = ref<HTMLElement>();
//echarts图表对象
const myChart = reactive<{ chart: ECharts }>({
  chart: {} as ECharts
})


onMounted(() => {
  initChart()
})

const initChart = () => {
  //初始化图表对象
  myChart.chart = echarts.init(chartRef.value)
  //配置图表对象
  const options = {
    title: {
      text: '这是一个演示图表'
    },
    //x轴
    xAxis: {

    },
    //y轴
    yAxis: {
      // min: 0,
      // max: 100,
      // axisLine: {
      //   show: true
      // }
    },
    //系列
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [100, 200, 300, 400]
      },
    ]
  }
  //渲染图表
  myChart.chart.setOption(options)

}


</script>



<style scoped lang="scss">
.mychart {
  width: 90vw;
  height: 90vh;
  border: 1px solid #ccc;
  margin: 20px auto;
}
</style>
